<div class="mb-3">
  <div
    class="input-group mb-3"
    ng-controller="PortalTemplateController as master"
  >
    <select
      class="btn btn-outline-secondary form-select col-sm-4"
      ng-model="master.activedTemplate"
      ng-init="master.templates = master.loadTemplates(-1, 'layout', 'Masters')"
      ng-options="item as item.fileName for item in master.templates track by item.id"
      ng-change="master.updateEditors()"
    ></select>
    <input
      class="form-control sel-filename"
      type="text"
      id="Layout"
      name="Layout"
      value="{{master.activedTemplate.fileName}}"
      placeholder="_BlankLayout"
    />
  </div>
</div>
<div ng-controller="PortalTemplateController as layout">
  <div class="mb-3">
    <h6>Layout</h6>
    <div class="input-group mb-3">
      <select
        class="btn btn-outline-secondary form-select col-sm-4"
        ng-model="layout.activedTemplate"
        ng-init="layout.templates = layout.loadTemplates($ctrl.template.id, '', $ctrl.template.folderType)"
        ng-options="item as item.fileName for item in layout.templates track by item.id"
        ng-change="layout.updateEditors()"
      ></select>

      <input
        class="form-control sel-filename"
        type="text"
        ng-model="$ctrl.template.fileName"
        value="{{layout.activedTemplate.fileName}}"
        placeholder="Input template name here..."
      />
      <input
        class="template-id"
        type="hidden"
        ng-model="$ctrl.template.id"
        value="{{layout.activedTemplate.id}}"
      />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div class="card mb-4">
        <div class="card-header-nav-pills">
          <ul class="nav nav-tabs text-center" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a
                class="nav-link active"
                id="pills-template-razor-tab"
                data-bs-toggle="pill"
                href="#pills-template-razor"
                role="tab"
                aria-controls="pills-template-razor"
                aria-selected="true"
                >Razor Template</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="pills-template-general-tab"
                data-bs-toggle="pill"
                href="#pills-template-general"
                role="tab"
                aria-controls="pills-template-general"
                aria-selected="true"
                >General Template</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="pills-template-mobile-tab"
                data-bs-toggle="pill"
                href="#pills-template-mobile"
                role="tab"
                aria-controls="pills-template-mobile"
                aria-selected="false"
                >Mobile Template</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="pills-template-others-tab"
                data-bs-toggle="pill"
                href="#pills-template-others"
                role="tab"
                aria-controls="pills-template-others"
                aria-selected="false"
                >Others</a
              >
            </li>
          </ul>
        </div>
        <div class="card-body p-1">
          <div class="tab-content" id="pills-tabContent">
            <div
              class="tab-pane fade active show"
              id="pills-template-razor"
              role="tabpanel"
              aria-labelledby="pills-template-razor-tab"
            >
              <div class="container-code-editor">
                <div class="form-control code-editor">
                  {{layout.activedTemplate.content}}
                </div>
                <input
                  class="form-control code-content"
                  type="hidden"
                  ng-model="$ctrl.template.content"
                  value="{{layout.activedTemplate.content}}"
                />
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="pills-template-general"
              role="tabpanel"
              aria-labelledby="pills-template-general-tab"
            >
              <div class="container-code-editor">
                <div class="form-control code-editor">
                  {{layout.activedTemplate.spaContent}}
                </div>
                <input
                  class="form-control code-content"
                  type="hidden"
                  ng-model="$ctrl.template.spaContent"
                  value="{{layout.activedTemplate.spaContent}}"
                />
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="pills-template-mobile"
              role="tabpanel"
              aria-labelledby="pills-template-mobile-tab"
            >
              <div class="container-code-editor">
                <div class="form-control code-editor json">
                  {{layout.activedTemplate.mobileContent}}
                </div>
                <input
                  class="form-control code-content"
                  type="hidden"
                  ng-model="$ctrl.template.mobileContent"
                  value="{{layout.activedTemplate.mobileContent}}"
                />
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="pills-template-others"
              role="tabpanel"
              aria-labelledby="pills-template-others-tab"
            >
              <div class="row">
                <div class="col-3">
                  <div
                    class="nav flex-column nav-tabs"
                    id="v-pills-tab"
                    role="tablist"
                    aria-orientation="vertical"
                  >
                    <a
                      class="nav-link active show"
                      id="v-pills-home-tab"
                      data-bs-toggle="pill"
                      href="#v-pills-home"
                      role="tab"
                      aria-controls="v-pills-home"
                      aria-selected="false"
                      >Scripts</a
                    >
                    <a
                      class="nav-link"
                      id="v-pills-profile-tab"
                      data-bs-toggle="pill"
                      href="#v-pills-profile"
                      role="tab"
                      aria-controls="v-pills-profile"
                      aria-selected="true"
                      >Styles</a
                    >
                  </div>
                </div>
                <div class="col-9">
                  <div class="tab-content" id="v-pills-tabContent">
                    <div
                      class="tab-pane fade"
                      id="v-pills-home"
                      role="tabpanel"
                      aria-labelledby="v-pills-home-tab"
                    >
                      <div class="container-code-editor">
                        <div class="form-control code-editor">
                          {{layout.activedTemplate.scripts}}
                        </div>
                        <input
                          class="form-control code-content"
                          ng-model="$ctrl.template.scripts"
                          type="hidden"
                          value="{{layout.activedTemplate.scripts}}"
                        />
                      </div>
                    </div>
                    <div
                      class="tab-pane fade active show"
                      id="v-pills-profile"
                      role="tabpanel"
                      aria-labelledby="v-pills-profile-tab"
                    >
                      <div class="container-code-editor">
                        <div class="form-control code-editor">
                          {{layout.activedTemplate.styles}}
                        </div>
                        <input
                          class="form-control code-content"
                          type="hidden"
                          ng-model="$ctrl.template.styles"
                          value="{{layout.activedTemplate.styles}}"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script
  defer="defer"
  src="~/app/controllers/portal-template-controller.js"
></script>
